<template>
	<!-- 自我介绍页面 -->
	<view class="textarea_box">
		    <view class="top_tou">
		      <view class="left_" @tap="fanLastPage">
		        <image
		          src="../../images/aliang/navigation.png"
		          mode="aspectFill"
		        ></image>
		      </view>
		      <view class="center_"> 编辑 · 自我介绍 </view>
		      <view class="right_"></view>
		    </view>
		<textarea class="textarea"  @input="handleContent" :value="desc" placeholder="还没有简介哦，介绍一下自己吧" maxlength="100" />
		<!-- <textarea class="textarea" v-else placeholder="还没有简介哦，介绍一下自己吧" maxlength="99" v-model="desc" /> -->
		<view class="num">{{ desc.length }}/100</view>
		<view class="save" @tap="save">
			保存
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				desc: ''
			}
		},
		// watch:{
		// 	desc(newval,val){
		// 		// console.log(val,nelval)
		// 		newval = newval.substring(0,100)
		// 	}
		// },
		onLoad(option) {
			if(option.text){
				this.desc = option.text
			}
			// this.desc = uni.getStorageSync('zwjs')
		},
		methods: {
			handleContent(e) {
				// if(!e.detail.value){
				// 	return
				// }
				var testLabel = /^[0-9a-zA-Z\u4E00-\u9FA5\(\)]*$/;
				this.desc = e.detail.value;
				setTimeout(() => { 
					this.desc = e.detail.value;
					if (testLabel.test(this.desc[98]) && !testLabel.test(this.desc[99])) {
						this.desc = this.desc.substring(0,99);
					}else{
						this.desc = this.desc.substring(0,100);
					}
				}, 0)
			},
			fanLastPage() { //返回上一页
			 window.history.go(-1);
			},
			save(){
				if (this.desc.trim().length == 0) {
				  uni.showToast({
				    title: "请输入自我介绍",
				    duration: 2000,
				    icon: "none",
				  });
				  return false;
				}else{
					uni.setStorageSync("zwjs",this.desc)
					uni.navigateBack({
						delta:1
					})
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.textarea_box {
		padding: 130rpx 32rpx 0 32rpx;
		  .top_tou {
		    box-sizing: border-box;
		    display: flex;
		    padding: 0 38rpx;
		    width: 750rpx;
		    height: 92rpx;
		    background: #f8f8f8;
		    line-height: 92rpx;
		    justify-content: space-between;
		    position: fixed;
		    top: 0;
		    left: 0;
		    z-index: 100;
		
		    .left_ {
		      height: 28rpx;
		      width: 18rpx;
		
		      image {
		        width: 100%;
		        height: 100%;
		      }
		    }
		
		    .center_ {
		      font-size: 36rpx;
		      font-family: PingFangSC, PingFangSC-Medium;
		      font-weight: 500;
		      text-align: center;
		      color: #111111;
		    }
		
		    .right_ {
		      width: 18rpx;
		    }
			}
			.textarea{
				width:auto;
			}
		.num {
			text-align: right;
			font-size: 28rpx;
			color: #999999;
		}
		.save {
			height: 86rpx;
			background-color: #2168EB;
			font-size: 30rpx;
			color: #ffffff;
			text-align: center;
			line-height: 86rpx;
			border-radius: 43rpx;
			margin-top: 40rpx;
		}
	}
</style>
